/**
 * 在vite中，直接使用import()会报错，
 * 所以此处使用  import.meta.glob 导入所有模块，
 * 以此获得所有模块的导入函数
 * page = {
 *  '../page/Home/index.tsx' : () => import('../page/Home/index.tsx')
 * }
 */
import { useEffect, useState } from 'react';

let page = import.meta.glob(`../pages/**/**.tsx`);
let modules: any = {
  ...page,
};

export default (url: String, dirname: String = 'page') => {
  // 拼接完整地址来在module中查找对应的import函数
  // dirname是为了预防有可能不从page文件夹加载页面，请无视
  let file = url.includes('.tsx') ? '' : 'index.tsx';
  let path = `../${dirname}/${url}/${file}`.replace(/\/\//g, '/');

  // 异步组件
  let AsyncComponent = () => {
    const [Component, setComponent] = useState(<></>);

    useEffect(() => {
      modules[path]().then((module: any) => {
        setComponent(<module.default />);
      });
    }, []);

    return Component;
  };

  // 返回异步组件
  return <AsyncComponent />;
};
